<template>
  <div class="content-center">
    <!-- 页面标签/页面tab -->
    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <div class="content-breadcrumb">
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">数据采集</el-breadcrumb-item>
          <el-breadcrumb-item>检核规则</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 页面内容-->
      <div class="audit-content">
        <div class="centent-title">
          <span>定制校验规则</span>
        </div>
        <!-- 页面内容 -->
        <div class="centent-inner">
          <div class="check-rules-prompt">
            <p>已选择的字段和控制工具可拖拽生成检验方法定制区的内容</p>  
            <button class="btn btn-primary">确认</button>
          </div>
          <ul class="check-rules-ulBox">
            <li class="check-rules-liBox">
              <div class="centent-title">
                <span>已选择字段</span>
              </div>
              <div class="check-rules-lable">
                <button class="btn">资产原值</button>
                <button class="btn">累计折旧</button>
                <button class="btn">资产净值</button>
              </div>
            </li>
            <li class="check-rules-liBox">
              <div class="centent-title">
                <span>检验方法定制区</span>
              </div>
              <div class="check-rules-lable check-rules-border-dashed">
                <div class="check-rules-border-prompt">
                  <p>将字段/配置选项</p>
                  <p>拖放到此区域</p>
                </div>
               
              </div>
            </li>
            <li class="check-rules-liBox">
              <div class="centent-title">
                <span>配置选项</span>
                <select>
                  <option>公共检核</option>
                  <option>公共检核</option>
                  <option>公共检核</option>
                </select>
              </div>
              <div class="check-rules-lable">
                <button class="btn">+</button>
                <button class="btn">-</button>
                <button class="btn">*</button>
                <button class="btn">/</button>
                <button class="btn">&gt;</button>
                <button class="btn">&lt;</button>
                <button class="btn">&lt;&gt;</button>
                <button class="btn">=</button>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {};
    }
  };
</script>

<style lang="less" scoped>
  .content-cotainer {
    padding: 0 20px 20px 20px;
    height: 100%;
    .centent-inner{
      padding: 0 20px 20px 20px;
      .check-rules-prompt{
        width: 100%;
        height: 32px;
        margin: 20px 0;
        display: flex;
        justify-content: space-between;
        p{
          width: 87%;
          background: #FCF8E3;
          border: 1px solid #FAF2CC;
          border-radius: 4px;
          line-height: 34px;
          font-size: 14px;
          color: #8A6D3B;
          padding: 0 0 0 3.5%;
        }
        button{
          padding: 4px 25px;
        }
      }
      .check-rules-ulBox{
        width: 100%;
        display: flex;
        justify-content: space-between;
        .check-rules-liBox{
          width: 30%;
          .centent-title{
            display: flex;
            justify-content: space-between;
            select{
              width: 45%;
              height: 32px;
              background: #FFFFFF;
              border: 1px solid #D2D2D2;
              border-radius: 5px;
              padding: 6px 0 6px 1%;
              font-size: 14px;
              color: #333333;
              box-sizing: border-box;
              margin: 4px 8px 4px 0;
            }
          }
          .check-rules-lable{
            width: 100%;
            height: 680px;
            box-sizing: border-box;
            background: #FFFFFF;
            border: 1px solid #CCCCCC;
            border-top: 0;
            border-radius: 0 0 6px 6px;
            padding: 20px;
            display: flex;
            justify-content: space-between;
            flex-wrap:wrap;
            align-content: flex-start;
           .btn{
             width: 145px;
             height: 32px;
             color: #6C8AB6;
             margin-bottom: 20px;
           }
          }
          .check-rules-border-dashed{
            border: 1px dashed #CCCCCC;
            border-top: 0;
            position: relative;
            .check-rules-border-prompt{
              text-align: center;
              position:absolute;
              top:50%;
              left:25%;
              p{
                font-size: 24px;
                color: #999999; 
              }
            }
          }
        }
        & > .check-rules-liBox:last-child {
          width: 35%;
          .btn{
            width: 114px;
          }
        }
      }
    }
  }
</style>